<template>
    <view class="categories-container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="back-button" @click="navigateBack">
                <text class="back-icon">←</text>
                <text class="back-text">返回</text>
                <text class="page-title">故事分类</text>

            </view>
            <!-- <view class="search-box">
                <input type="text" placeholder="搜索分类" />
            </view> -->
        </view>

        <!-- 主要内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 热门分类 -->
            <view class="section-header">
                <text class="section-title">热门分类</text>
            </view>
            <view class="popular-categories">
                <view class="popular-category"
                    @click="navigateTo('/pages/storylibrary/storyCollection/categories/family')">
                    <view class="category-icon">👪</view>
                    <text class="category-name">家庭故事</text>
                    <text class="category-count">28个故事</text>
                </view>
                <view class="popular-category"
                    @click="navigateTo('/pages/storylibrary/storyCollection/categories/life')">
                    <view class="category-icon">🌱</view>
                    <text class="category-name">生命历程</text>
                    <text class="category-count">35个故事</text>
                </view>
                <view class="popular-category"
                    @click="navigateTo('/pages/storylibrary/storyCollection/categories/love')">
                    <view class="category-icon">❤️</view>
                    <text class="category-name">爱的故事</text>
                    <text class="category-count">19个故事</text>
                </view>
            </view>

            <!-- 所有分类 -->
            <view class="section-header">
                <text class="section-title">所有分类</text>
            </view>
            <view class="all-categories">
                <!-- 家庭故事 -->
                <view class="category-card"
                    @click="navigateTo('/pages/storylibrary/storyCollection/categories/family')">
                    <view class="category-card-header">
                        <view class="category-icon-large">👪</view>
                        <view class="category-info">
                            <text class="category-name-large">家庭故事</text>
                            <text class="category-count-large">28个故事</text>
                        </view>
                    </view>
                    <view class="category-description">
                        <text>关于家庭关系、亲情纽带和家族传承的温暖故事</text>
                    </view>
                    <view class="category-tags">
                        <text class="category-tag">亲情</text>
                        <text class="category-tag">传承</text>
                        <text class="category-tag">家族</text>
                    </view>
                </view>

                <!-- 生命历程 -->
                <view class="category-card" @click="navigateTo('/pages/storylibrary/storyCollection/categories/life')">
                    <view class="category-card-header">
                        <view class="category-icon-large">🌱</view>
                        <view class="category-info">
                            <text class="category-name-large">生命历程</text>
                            <text class="category-count-large">35个故事</text>
                        </view>
                    </view>
                    <view class="category-description">
                        <text>记录人生不同阶段的经历、成长和蜕变的故事</text>
                    </view>
                    <view class="category-tags">
                        <text class="category-tag">成长</text>
                        <text class="category-tag">蜕变</text>
                        <text class="category-tag">人生</text>
                    </view>
                </view>

                <!-- 爱的故事 -->
                <view class="category-card" @click="navigateTo('/pages/storylibrary/storyCollection/categories/love')">
                    <view class="category-card-header">
                        <view class="category-icon-large">❤️</view>
                        <view class="category-info">
                            <text class="category-name-large">爱的故事</text>
                            <text class="category-count-large">19个故事</text>
                        </view>
                    </view>
                    <view class="category-description">
                        <text>关于爱情、友情和各种形式的爱的感人故事</text>
                    </view>
                    <view class="category-tags">
                        <text class="category-tag">爱情</text>
                        <text class="category-tag">友情</text>
                        <text class="category-tag">关怀</text>
                    </view>
                </view>

                <!-- 智慧传承 -->
                <view class="category-card"
                    @click="navigateTo('/pages/storylibrary/storyCollection/categories/wisdom')">
                    <view class="category-card-header">
                        <view class="category-icon-large">🧠</view>
                        <view class="category-info">
                            <text class="category-name-large">智慧传承</text>
                            <text class="category-count-large">22个故事</text>
                        </view>
                    </view>
                    <view class="category-description">
                        <text>长辈们的人生智慧、经验和教训的分享</text>
                    </view>
                    <view class="category-tags">
                        <text class="category-tag">智慧</text>
                        <text class="category-tag">经验</text>
                        <text class="category-tag">教训</text>
                    </view>
                </view>

                <!-- 勇气故事 -->
                <view class="category-card"
                    @click="navigateTo('/pages/storylibrary/storyCollection/categories/courage')">
                    <view class="category-card-header">
                        <view class="category-icon-large">🦁</view>
                        <view class="category-info">
                            <text class="category-name-large">勇气故事</text>
                            <text class="category-count-large">17个故事</text>
                        </view>
                    </view>
                    <view class="category-description">
                        <text>关于面对困难、挑战和恐惧时展现勇气的故事</text>
                    </view>
                    <view class="category-tags">
                        <text class="category-tag">勇敢</text>
                        <text class="category-tag">挑战</text>
                        <text class="category-tag">坚强</text>
                    </view>
                </view>

                <!-- 珍贵回忆 -->
                <view class="category-card"
                    @click="navigateTo('/pages/storylibrary/storyCollection/categories/memory')">
                    <view class="category-card-header">
                        <view class="category-icon-large">📸</view>
                        <view class="category-info">
                            <text class="category-name-large">珍贵回忆</text>
                            <text class="category-count-large">31个故事</text>
                        </view>
                    </view>
                    <view class="category-description">
                        <text>关于难忘的人、事、物和特殊时刻的回忆</text>
                    </view>
                    <view class="category-tags">
                        <text class="category-tag">回忆</text>
                        <text class="category-tag">记忆</text>
                        <text class="category-tag">怀旧</text>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        },
        navigateBack() {
            uni.navigateBack();
        }
    }
}
</script>

<style>
.categories-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
}

/* 导航栏样式 */
.nav-bar {
    padding: 20rpx 30rpx;
    background-color: #52c41a;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-button {
    display: flex;
    align-items: center;
}

.back-icon {
    font-size: 36rpx;
    margin-right: 10rpx;
}

.back-text {
    font-size: 28rpx;
    margin-right: 20rpx;
}

.page-title {
    font-size: 34rpx;
    font-weight: bold;
}

.search-box {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 30rpx;
    padding: 10rpx 20rpx;
    width: 200rpx;
}

.search-box input {
    font-size: 26rpx;
    color: #fff;
}

/* 主内容区样式 */
.main-content {
    flex: 1;
    width: calc(100% - 40rpx);
    padding: 20rpx;
}

/* 区块标题样式 */
.section-header {
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

/* 热门分类样式 */
.popular-categories {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
}

.popular-category {
    width: 30%;
    background-color: #fff;
    border-radius: 15rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.popular-category:active {
    transform: scale(0.95);
}

.category-icon {
    font-size: 60rpx;
    margin-bottom: 15rpx;
}

.category-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
    text-align: center;
}

.category-count {
    font-size: 24rpx;
    color: #999;
}

/* 所有分类样式 */
.all-categories {
    display: flex;
    flex-direction: column;
}

.category-card {
    width: calc(100% - 50rpx);
    background-color: #fff;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.category-card:active {
    transform: scale(0.98);
}

.category-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
}

.category-icon-large {
    font-size: 70rpx;
    margin-right: 20rpx;
}

.category-info {
    flex: 1;
}

.category-name-large {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5rpx;
}

.category-count-large {
    font-size: 24rpx;
    color: #999;
}

.category-description {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 15rpx;
    line-height: 1.5;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
}

.category-tag {
    font-size: 22rpx;
    color: #52c41a;
    background-color: rgba(82, 196, 26, 0.1);
    padding: 6rpx 15rpx;
    border-radius: 20rpx;
    margin-right: 15rpx;
    margin-bottom: 10rpx;
}
</style>